<template>
  <div class="internetPushGuestMange">
    <el-form :inline="true" size="small" :model="filterForm" class="demo-form-inline">
      <el-form-item label="城市：">
        <el-select v-model="filterForm.cityId" placeholder="请选择城市">
          <el-option
            v-for="item in allCityList"
            :key="item.cityId"
            :label="item.city"
            :value="item.cityId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="网络推客：">
        <el-input v-model="filterForm.name" placeholder="请输入姓名/手机号"></el-input>
      </el-form-item>
      <el-form-item label="来源：">
        <el-select v-model="filterForm.source" placeholder="请选择来源">
          <el-option
            v-for="item in sources"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="注册/开通时间：">
        <el-date-picker
          v-model="filterFormArr.createTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
        <el-button type="primary" @click="handleExport">导出</el-button>
        <a :href="exportUrl" ref="export"></a>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" tooltip-effect="dark" border>
      <el-table-column type="index" align="center" width="55"></el-table-column>
      <el-table-column prop="city" align="center" label="城市"></el-table-column>
      <el-table-column prop="name" align="center" width="150" label="姓名"></el-table-column>
      <el-table-column prop="phone" align="center" width="150" label="手机号"></el-table-column>
      <el-table-column prop="createTime" align="center" width="150" label="注册/开通时间">
        <template slot-scope="scope">{{scope.row.createTime | formatTime}}</template>
      </el-table-column>
      <el-table-column prop="lastLoginTime" align="center" label="最后登录时间">
        <template slot-scope="scope">{{scope.row.lastLoginTime | formatTime}}</template>
      </el-table-column>
      <el-table-column prop="sourceName" align="center" label="来源"></el-table-column>
    </el-table>
    <el-pagination
      class="mt15"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="filterForm.pageSize"
      :current-page="filterForm.pageNum"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableDataTotal"
    ></el-pagination>
  </div>
</template>


<script type="text/ecmascript-6">
import util from "@/common/utils";
export default {
  name: "internetPushGuestMange",
  data() {
    return {
      exportUrl: "",
      filterForm: {
        cityId: "",
        name: "",
        source: "",

        pageNum: 1,
        pageSize: 10
      },
      filterFormArr: {
        createTime: ["", ""]
      },
      allCityList: [],
      tableDataTotal: 10,
      tableData: [],
      sources: [
        { value: "", label: "全部" },
        { value: 0, label: "经纪人录入" },
        { value: 1, label: "运营录入" },
        { value: 2, label: "扫码录入" },
        { value: 3, label: "购房者注册" },
        { value: 4, label: "推荐注册" },
        { value: 5, label: "公众号注册" },
        { value: 7, label: "微楼盘注册" },
        { value: 10, label: "集团小程序注册" }
      ]
    };
  },
  mounted() {
    this.getAllCity();
    this.query();

    console.log(util.getTimeString(+new Date()));
  },
  activated() {
    this.query();
  },
  methods: {
    handleExport() {
      this.filterForm.pageNum = 1;
      if (this.filterForm.startTime) {
        this.filterForm.startTime = +this.filterFormArr.createTime[0];
        this.filterForm.endTime =
          +this.filterFormArr.createTime[1] + 60 * 60 * 24 - 1;
      } else {
        this.filterForm.startTime = "";
        this.filterForm.endTime = "";
      }

      let params = JSON.parse(JSON.stringify(this.filterForm));
      params.pageSize = 999999999;

      let exportUrl = "";
      for (const key in params) {
        exportUrl += "&" + key + "=" + params[key];
      }

      window.open(
        this.$axios.baseURL + "/user/buyers/webPushExport?" + exportUrl.slice(1)
      );
    },
    query() {
      this.filterForm.pageNum = 1;
      if (this.filterForm.startTime) {
        this.filterForm.startTime = +this.filterFormArr.createTime[0];
        this.filterForm.endTime =
          +this.filterFormArr.createTime[1] + 60 * 60 * 24 - 1;
      } else {
        this.filterForm.startTime = "";
        this.filterForm.endTime = "";
      }
      this.getTableList();
    },
    goDetail(type, id) {
      this.$router.push({
        path: "/brokerManageDetail",
        query: {
          type,
          id
        }
      });
    },
    getTableList() {
      this.$axios
        .post("/user/buyers/webPushListPage", this.filterForm)
        .then(res => {
          this.tableData = res.list;
          this.tableDataTotal = res.total;
        });
    },
    handleSizeChange(val) {
      this.filterForm.pageSize = val;
      this.getTableList();
    },
    handleCurrentChange(val) {
      this.filterForm.pageNum = val;
      this.getTableList();
    },
    getAllCity() {
      this.$axios.post("/city/cityList", {}).then(res => {
        this.allCityList = res.cityList;
      });
    }
  },
  components: {},
  computed: {},
  filters: {
    formatTime(time) {
      return util.getTimeString(time);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus"></style>
